<template>
  <div class="login-container">
    <div class="login-box">
      <div class="avatar-box">
        <img src="../assets/logo.png">
      </div>
      <el-form ref="loginFormRef" class="el-form" :model="formData" :rules="loginRules">
        <el-form-item label="" prop="username">
          <el-input v-model="formData.username" prefix-icon="el-icon-user-solid" type="text"></el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input v-model="formData.password" prefix-icon="el-icon-lock" type="password"></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button @click="login" class="btn" type="primary" round>登录</el-button>
          <el-button @click="resetForm" class="btn" type="danger" round>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        formData: {
          username: 'admin',
          password: '123456'
        },
        loginRules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            {min: 5, max: 5, message: '长度在 5 到 5 个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 6, max: 6, message: '长度在 6 到 6 个字符', trigger: 'blur'}

          ]
        }
      }
    },
    methods:{
      resetForm(){
        this.$refs.loginFormRef.resetFields();
      },
      login(){
        this.$refs.loginFormRef.validate(async valid=>{
          if(valid){
            const result =await this.$http.post("login",this.formData);
            if(result.data.meta.status === 200){
              this.$notify.success('登录成功!');
              window.sessionStorage.setItem('token',result.data.data.token);
              this.$router.push('/home');
            }else{
              this.$notify.error('登录失败!');
            }
          }else{
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="less" scoped>
  .login-container {
    height: 100%;
    background-color: darkcyan;
    position: relative;
  }

  .login-box {
    width: 450px;
    height: 300px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    border: 1px solid #ccc;
    box-shadow: 0 0 2px rgb(0,0,0,0.1);
    .avatar-box {
      height: 130px;
      width: 130px;
      border: 1px solid #eee;
      border-radius: 50%;
      overflow: hidden;
      box-sizing: border-box;
      padding: 10px;
      box-shadow: 0 0 10px #dddddd;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -160%);
      background-color: #fff;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }

    .el-form {
      padding: 0 40px;
      margin-top: 100px;

      .btns {
        display: flex;
        justify-content: center;

        .btn {
          width: 130px;
        }
      }
    }
  }
</style>
